
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid p-t-15">

    <div class="row">

      <div class="col-lg-12">
        <div class="card">
          <ul class="nav nav-tabs page-tabs pt-2 pl-3 pr-3">
            <li class="nav-item"> <a class="nav-link active" style="cursor: pointer;">基本</a> </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active">

              <form method="post" name="edit-form" class="edit-form" enctype="multipart/form-data">
                {foreach $ConfigList as $item}
                {if condition="$item.type == 'text'"}
                <div class="form-group">
                  <label for="web_site_title">{$item.title}</label>
                  <input class="form-control" type="text" id="{$item.key}" name="{$item.key}" value="{$item.value}"
                    placeholder="请输入站点标题">
                </div>
                {elseif condition="$item.type == 'file'"}
                <div class="form-group">
                  <label for="{$item.key}">{$item.title}</label>
                  <div class="input-group" style="display: block;">
                    <input type="file" class="form-control" name="{$item.key}" id="{$item.key}" hidden>
                    <img class="img" src="{$item.value ? $item.value : '/static/home/res/images/upload.png'}"
                      id="img-{$item.key}" width="200">
                    <div class="input-group-append">
                      <button class="btn btn-default" type="button" onclick="upload('#{$item.key}','.img')">上传图片</button>
                    </div>
                  </div>
                </div>
                {/if}
                {/foreach}
                <div class="form-group">
                  <button type="submit" class="btn btn-primary m-r-5">确 定</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</main>
<!--End 页面主要内容-->

<script>
  // 图片预览函数
  function GetObjectURL (file) {
    // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
    var url = null;

    //判断是否为IE浏览器还是google还是其他浏览器
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file)
    }

    return url
  }

  function upload (elem, img) {
    // 点击拉起上传选择
    $(elem).click()

    $(elem).change(function () {
      let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}
      let id = $(this).attr('id')
      let url = GetObjectURL(file)
      let imgArr = $(img);
      for (let item of imgArr) {
        let itemid = $(item).attr('id')
        if ('img-' + id == itemid) {
          $(item).attr('src', url)
        }
      }
    })
  }
</script>